<template>
  <el-dialog v-model="drawer" title="新建促销品记录" :append-to-body="true" width="500px" @close="close">
    <el-form :model="form" :rules="rules" ref="ruleRefForm" size="small" label-width="100px">
        <el-form-item label="对应印刷品" prop="marketId">
            <el-select v-model="form.marketId" placeholder="请选择" filterable style="width:360px" @change="selMarket">
                <el-option
                    v-for="item in marketList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="对应印刷品" prop="productId">
            <el-select v-model="form.productId" placeholder="请选择" filterable style="width:360px">
                <el-option
                    v-for="item in printedList"
                    :key="item.id"
                    :label="item.activityProduct"
                    :value="item.id"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="领用人" prop="userId">
            <el-select v-model="form.userId" placeholder="请选择" filterable style="width:360px" @change="selectUser">
                <el-option
                    v-for="item in options"
                    :key="item.userId"
                    :label="item.nickname"
                    :value="item.userId"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="number">
            <el-input-number
                v-model="form.number"
                :min="1"
                :max="form.amount"
                :step="1"
                size="small"
                controls-position="right"
                style="width:162px"
            />
        </el-form-item>
        <el-form-item label="领用时间" prop="createTime">
            <el-date-picker v-model="form.createTime" type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择" size="small" style="width:162px" />
        </el-form-item>
        <el-form-item label="用途" prop="remark">
            <el-input type="textarea" placeholder="请输入" v-model="form.remark"></el-input>
        </el-form-item>
    </el-form>
    <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitForm(ruleRefForm)">提交</el-button>
            <el-button size="small" type="default" @click="cancelForm(ruleRefForm)">取消</el-button>
        </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { computed, toRefs, ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import api from '/@/api/commonApi'

export default {
    name: 'PromotionClaimCreate',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        editForm: {
            type: Object,
            default(){
                return {}
            }
        }
    },
    emits: ['onSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        let { dialogDrawer, isEdit, editForm } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const ruleRefForm = ref()
        const state = reactive({
            form: {
                marketId: '',
                marketName: '',
                productId: '',
                userId: '',
                userName: '',
                number: 1,
                createTime: null,
                remark: ''
            },
            rules: {
                marketId: [{ required: true, message: '请选择关联的活动', trigger: 'blur' }],
                userId: [{ required: true, message: '请选择领用人', trigger: 'blur' }],
            },
            printedList: [{
                value: '1',
                label: '印刷品'
            },{
                value: '2',
                label: '定制公仔'
            }],
            options: [],
            marketList: [],
        })
        watch(() => dialogDrawer.value,
            val => {
                if(val) {
                    if (ruleRefForm.value) {
                        ruleRefForm.value.resetFields()
                    }
                    // 编辑
                    if(isEdit.value) {
                        getList()
                        getMarketList()
                        getEnterpriseUsers()
                        state.form.productId = editForm.value.productId
                        state.form.amount = editForm.value.amount
                    }
                }
            }
        )
        // 首页列表
        const getList = () => {
            api.actProductList({current: 1, size: 1000}).then(res => {
                state.printedList = res.data.records
            })
        }
        // 领用人列表
        const getEnterpriseUsers = () => {
            api.getEnterpriseUsers().then(res => {
                state.options = res.data
            })
        }
        // 活动列表
        const getMarketList = () => {
            api.marketList({current: 1, size: 1000}).then(res => {
                state.marketList = res.data.records
            })
        }
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = formEl => {
            if (!formEl) return
            formEl.validate(valid => {
                if (valid) {
                    api.addProductLog(state.form).then(res => {
                        close()
                        ElMessage.success('新建成功')
                        context.emit('onSubmit', true)
                    })
                }
            })
        }
        const cancelForm = formEl => {
            if (!formEl) return
            formEl.resetFields()
            close()
        }
        // 选择领取人
        const selectUser = val => {
            let list = JSON.parse(JSON.stringify(state.options))
            const result = list.find(item => {
                return item.userId == val
            })
            state.form.userId = result.userId
            state.form.userName = result.nickname
        }
        // 选择关联的活动
        const selMarket = val => {
            let list = JSON.parse(JSON.stringify(state.marketList))
            const result = list.find(item => {
                return item.id == val
            })
            state.form.marketId = result.id
            state.form.marketName = result.name
        }

        return {
            ...toRefs(state),
            drawer,
            close,
            submitForm,
            cancelForm,
            ruleRefForm,
            selectUser,
            selMarket,
        }
    }
}
</script>

<style lang="scss">

</style>